<template>
  <div>
    <AnnCard title="搜索栏" iconName="solar:filter-broken">
      <div class="flex flex-col w-full">
        <!-- 标签 -->
        <section class="grid flex-grow card bg-base-100 rounded-box">
          <div class="flex items-center">
            <span class="text-sm font-bold mt-1" style="writing-mode: vertical-rl">标 签</span>
            <div class="flex flex-wrap gap-2 ml-4 mt-2 mr-2 mb-2">
              <span v-for="(item, index) in tagList" :key="index" @click="toggleSelected(item.tagId)"
                    :class="[themeStore.theme.dark?
                      {'bg-error text-base-100':params.selectedTags.includes(item.tagId),
                        'bg-warning text-base-100':!params.selectedTags.includes(item.tagId)}
                        :
                      {'bg-error text-base-100':params.selectedTags.includes(item.tagId),
                        'bg-warning text-base-100':!params.selectedTags.includes(item.tagId)},]"
                    class="px-2 py-1 bg- rounded cursor-pointer transition-all duration-200 ease-in-out text-xs">
                {{ item.tagName }}
              </span>
            </div>
          </div>
        </section>
        <!-- 输入框 -->
        <section class="grid h-20 flex-grow card rounded-box place-items-center">
          <div class="form-control h-12 w-full">
            <div class="join">
              <input class="input input-bordered join-item w-full"
                     placeholder="输入文章标题或内容..."
                     v-model="params.keyword"
                     @input="handleInputChange"/>
              <button class="btn join-item rounded-r-full ml-0.5" @click="handleSearch()">
                <Icon name="ion:search-outline" size="24"/>
              </button>
            </div>
            <!-- 下拉内容区域 -->
<!--            <div
                v-if="showDropdown"
                class="z-20 mt-2">
              <ul class="menu menu-xs bg-base-100 rounded-box w-full border border-slate-400">
                <li v-for="(item,index) in articleSearchList" :key="index">
                  <NuxtLink :to="`/article/${item.articleId}`">
                    <div class="flex flex-col items-start">
                      <span class="font-semibold text-lg text-slate-800" v-html="item.articleTitle"/>
                      <p class="ml-2 text-sm text-slate-600" v-html="item.articleContent"/>
                    </div>
                  </NuxtLink>
                </li>
              </ul>
            </div>-->
          </div>
        </section>
      </div>
    </AnnCard>
  </div>
</template>

<script setup lang="ts">
import {useThemeStore} from "~/store/theme";
import type {BlogTagWebVO} from "~/api/tag/types";
import {queryTagList} from "~/api/tag";
import type {BlogArticleSearchWebVO} from "~/api/article/types";

const themeStore = useThemeStore();

const emits = defineEmits(["search"]);

const tagList = ref<BlogTagWebVO[]>([]);
const params = reactive({
  selectedTags: <Array<string | number>>[],
  keyword: '',
});
const showDropdown = ref(false)

const articleSearchList = ref<BlogArticleSearchWebVO[]>([])

const handleInputChange = () => {
  if (params.keyword.length > 0) {
    // 模拟从后端获取数据
    articleSearchList.value = [
      {
        articleId:"1796902173160943617",
        articleTitle: "标题1",
        articleContent: "这是内容1 的详细描述"
      },
      {
        articleId:"2",
        articleTitle: "标题2",
        articleContent: "这是内容2 的详细描述"
      },
      {
        articleId:"3",
        articleTitle: "标题3",
        articleContent: "这是内容3 的详细描述"
      },
      {
        articleId:"4",
        articleTitle: "标题4",
        articleContent: "这是内容4 的详细描述"
      },
      {
        articleId:"5",
        articleTitle: "标题5",
        articleContent: "这是内容5 的详细描述"
      }
    ]
    showDropdown.value = true;
  } else {
    articleSearchList.value = [];
    showDropdown.value = false;
  }
};
const selectDropdownItem = (item: string) => {
  //TODO
};

const getTag = async () => {
  // 请求接口
  const {data: tagData} = await useAsyncData("indexTagList", () =>
      queryTagList()
  );
  tagList.value = tagData.value as BlogTagWebVO[];
}

// 选中
const toggleSelected = (tagId: string | number) => {
  const selectedIndex = params.selectedTags.indexOf(tagId);
  if (selectedIndex > -1) {
    // remove selected tag
    params.selectedTags.splice(selectedIndex, 1);
  } else {
    // add selected tag
    params.selectedTags.push(tagId);
  }
  emits("search", params);
};
const handleSearch = () => {
  emits("search", params);
};
getTag()

</script>